<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="/lib/echarts.min.js"></script>

</head>

<body>
  <div id="main" style="height:16.667rem;width:100%;"></div>
  <script>
    const mchart = echarts.init(document.getElementById('main'))
    const xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',];
    const yDataArr1 = [3200, 4800, 2600, 1900, 3000, 2400, 1900, 1600, 2000, 2200, 1200, 1400]
    const yDataArr2 = [4200, 3400, 1600, 2900, 2000, 1400, 2900, 2600, 3000, 2200, 2200, 2400]
    // const yDataArr = [3201, 3205, 3209, 3200, 3206, 3202, 3208, 3202, 3201, 3206, 3208, 3205]
    const option = {
      title: {
        text: '方便面销量数据'
      },
      tooltip: {},
      legend: {
        data: ['康师傅销量']
      },
      xAxis: {
        type: 'category',
        data: xDataArr,
        boundaryGap: false //紧挨边缘 x轴数值贴着y轴
      },
      yAxis: {
        type: 'value',
        scale: true //缩放: 脱离0值的比例 所有数值比较大,但是彼此的值相差很小 如: [3201, 3205, 3209, 3200, 3206, 3202, 3208, 3202, 3201, 3206, 3208, 3205]
      },
      series: [
        {
          name: '康师傅销量',
          type: 'line',
          data: yDataArr1,
          markPoint: { //最值
            data: [
              {
                type: 'max',
                name: '最大值'
              },
              {
                type: 'min'
              }
            ]
          },
          markLine: { //平均值
            data: [
              {
                name: '平均线',
                // 支持 'average', 'min', 'max'
                type: 'average'
              }
            ]
          },
          markArea: { //标记区域
            data: [
              [
                {
                  xAxis: '1月',
                },
                {
                  xAxis: '3月',
                }
              ],
              [
                {
                  xAxis: '7月',
                },
                {
                  xAxis: '8月',
                }
              ]
            ]
          },
          // smooth: true, //平滑效果
          lineStyle: { //线条风格
            color: 'green',
            type: 'dashed' // 'dotted' 'solid'
          },
          areaStyle: { //填充风格
            // color: 'pink'
          }
        },
        {
          name: '今麦郎销量',
          type: 'line',
          data: yDataArr2
        }
      ]
    }
    mchart.setOption(option)
  </script>
</body>

</html>